<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏 - 小游戏合集</title>
    <link rel="stylesheet" href="../styles/main.css">
    <link rel="stylesheet" href="../styles/game-detail.css">
</head>
<body>
    <header>
        <h1>小游戏合集</h1>
    </header>

    <main>
        <div class="game-container">
            <div class="game-header">
                <h2 class="game-title">猜数字游戏</h2>
                <button class="back-btn" onclick="location.href='../index.html'">返回首页</button>
            </div>

            <div class="game-content">
                <p>我已经想好了一个1到100之间的数字，试着猜猜是多少！</p>
                <div id="game-messages" class="message-area"></div>
                <div id="guess-history"></div>
            </div>

            <div class="game-controls">
                <input type="number" id="guess-input" min="1" max="100" placeholder="输入你猜的数字">
                <button id="guess-btn" class="game-btn">猜！</button>
                <button id="restart-btn" class="game-btn" style="display: none;">重新开始</button>
            </div>
        </div>
    </main>

    <footer>
        <p>&copy; 2023 小游戏合集</p>
    </footer>

    <script>
        // 猜数字游戏逻辑
        document.addEventListener('DOMContentLoaded', function() {
            const guessInput = document.getElementById('guess-input');
            const guessBtn = document.getElementById('guess-btn');
            const restartBtn = document.getElementById('restart-btn');
            const messagesArea = document.getElementById('game-messages');
            const guessHistory = document.getElementById('guess-history');

            let randomNumber;
            let guesses = [];

            // 初始化游戏
            function initGame() {
                randomNumber = Math.floor(Math.random() * 100) + 1;
                guesses = [];
                messagesArea.innerHTML = '';
                guessHistory.innerHTML = '';
                guessInput.value = '';
                guessBtn.style.display = 'block';
                restartBtn.style.display = 'none';
                console.log('神秘数字是：', randomNumber); // 用于测试
            }

            // 处理猜测
            function handleGuess() {
                const guess = parseInt(guessInput.value);

                if (isNaN(guess) || guess < 1 || guess > 100) {
                    showMessage('请输入1到100之间的有效数字！', 'error');
                    return;
                }

                guesses.push(guess);
                updateGuessHistory();

                if (guess === randomNumber) {
                    showMessage(`恭喜你！${guess}就是正确答案！你一共猜了${guesses.length}次。`, 'success');
                    guessBtn.style.display = 'none';
                    restartBtn.style.display = 'block';
                } else if (guess < randomNumber) {
                    showMessage('太小了！再大一点。', 'hint');
                } else {
                    showMessage('太大了！再小一点。', 'hint');
                }

                guessInput.value = '';
                guessInput.focus();
            }

            // 显示消息
            function showMessage(text, type) {
                const messageEl = document.createElement('p');
                messageEl.textContent = text;
                messageEl.className = `message ${type}`;
                messagesArea.appendChild(messageEl);
                messageEl.scrollIntoView({ behavior: 'smooth' });
            }

            // 更新猜测历史
            function updateGuessHistory() {
                guessHistory.innerHTML = `<p>你的猜测: ${guesses.join(', ')}</p>`;
            }

            // 事件监听
            guessBtn.addEventListener('click', handleGuess);
            restartBtn.addEventListener('click', initGame);

            guessInput.addEventListener('keypress', function(e) {
                if (e.key === 'Enter') {
                    handleGuess();
                }
            });

            // 初始化游戏
            initGame();
        });
    </script>
</body>
</html>
